<template>
  <div class="app-container">
    <!--地图div-->
    <div class="mapDiv">
      <MajorFacInfoMap v-if="completeRefreshData==true"
                        :showHideDivType="showHideDivType"
                        @showHideUploadDiv="showHideUploadDiv"
                        @showHideManageDiv="showHideManageDiv"
                        @showHideQueryDiv="showHideQueryDiv"
                        @showDetailId="showDetailId"
                        @getMap="getMap"
                        @showHideRangeDiv="showHideRangeDiv" :positioningData="positioningData" @openXzq="openXzq"
                        @queryTaskRegionNameCodeListByGeomText="queryTaskRegionNameCodeListByGeomText"
      ></MajorFacInfoMap>
    </div>
    <!--index页面div-->
    <div id="majorFacInfoMapDiv" class="ol-popup">
      <!--上传面板-->
      <div v-if="showHideUploadDivBool" class="new-uploadDiv">
        <div class="new-uploadDiv-inner">
          <el-form :model="uploadParams" :rules="rules" ref="rulesUpload" label-position="right" label-width="82px">
            <el-form-item label="省" prop="province">
              <el-select v-model="uploadParams.province" placeholder="请选择" @change="chooseProvince" clearable value-key="name">
                <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="市" prop="city">
              <el-select v-model="uploadParams.city" placeholder="请选择" @change="chooseCity" clearable value-key="name">
                <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="区/县" prop="county">
              <el-select v-model="uploadParams.county" :disabled="uploadParams.dataType === '房屋抗震能力分区图'"
                         placeholder="请选择" @change="chooseCounty" clearable value-key="name">
                <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数据类型" prop="dataType">
              <el-select v-model="uploadParams.dataType" placeholder="请选择" @change="changeDataType" clearable value-key="name">
                <el-option v-for="item in dataTypesArray" :key="item.code" :label="item.name" :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="文件类型" prop="fileType">
              <el-select v-model="uploadParams.fileType" placeholder="请选择" @change="changeFileType" clearable value-key="name"
                         disabled>
                <el-option v-for="item in fileType" :key="item.code" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div class="new-fileBtn">
            <template v-if="uploadParams.fileType=='1'">
              <input type="file" @change="uploadFileChange" style="width: 70px;" id="spaceData-button-selectfile" multiple="multiple" accept=".shp,.dbf,.prj,.sbn,.sbx,.shp.xml,.shx,.cpg" />
            </template>
            <template v-if="uploadParams.fileType=='2'">
              <input type="file" @change="uploadFileChange" style="width: 70px;" id="excel-button-selectfile" multiple="multiple" accept=".xls,.xlsx" />
            </template>
          </div>
          <div v-if="uploadParams.fileType=='1'" class="new-fieldInfoBtn">
            <a @click="showFieldDialog"><h5>字段说明</h5></a>
          </div>
          <div v-if="uploadParams.fileType=='2' && downloadFileName!=null && downloadFileName!==''" class="new-downloadFileBtn">
            <a @click="importTemplate" :title="'下载Excel导入模板：'+downloadFileName"><h5>下载模板</h5></a>
          </div>
          <div class="new-filesTextArea">
            <el-input type="textarea" :rows="8" placeholder="导入多个文件时，文件名须相同" v-model="textarea" readonly></el-input>
          </div>
          <div class="new-uploadBtnDiv">
            <el-button @click="uploadFileClick" type="primary">上传</el-button>
          </div>
          <div class="new-closeBtnDiv">
            <el-button @click="showHideUploadDiv(false)">关闭</el-button>
          </div>
        </div>
      </div>
      <!--字段说明-->
      <FieldInfoDialog v-if="fieldInfoVisible==true"
                       :dataType="uploadParams.dataType"
                       @closeFieldInfoDialog="fieldInfoVisible=false"
      ></FieldInfoDialog>
      <!--管理面板-->
      <div v-if="showHideManageDivBool" class="new-queryDiv">
        <div class="new-queryDiv-inner">
          <el-form :model="queryParams" label-position="right" label-width="82px">
            <el-form-item label="省" prop="province">
              <el-select v-model="queryParams.province" placeholder="请选择" @change="chooseProvince" clearable value-key="name">
                <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="市" prop="city">
              <el-select v-model="queryParams.city" placeholder="请选择" @change="chooseCity" clearable value-key="name">
                <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="区/县" prop="county">
              <el-select v-model="queryParams.county" placeholder="请选择" @change="chooseCounty" clearable value-key="name">
                <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数据类型" prop="dataType">
              <el-select v-model="queryParams.dataType" placeholder="请选择" clearable value-key="name">
                <el-option v-for="item in dataTypesArray" :key="item.code" :label="item.name" :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div class="new-queryBtnDiv">
            <el-button @click="queryClick" type="primary">查询图层</el-button>
          </div>
          <div class="new-queryTableBtnDiv">
            <el-button @click="queryTableClick" type="primary">查询列表</el-button>
          </div>
          <div class="new-closeBtnDiv">
            <el-button @click="showHideManageDiv(false)">关闭</el-button>
          </div>
        </div>
      </div>
      <!--管理文件结果面板-->
      <div v-if="queryFileResult" class="new-queryFileResultDiv">
        <div class="new-queryTableBtn">
          <el-button @click="closeQueryFileResult" type="primary">关闭</el-button>
          <el-button @click="deleteFileResultClick" type="primary">删除</el-button>
          <el-button @click="downloadFileResultClick" type="primary">下载</el-button>
        </div>
        <div class="new-queryTableDiv">
          <el-table ref="multipleTable" :data="fileDataList" tooltip-effect="dark" height="140px"
                    @selection-change="handleSelectionChange" stripe :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
            <el-table-column type="selection" width="50"> </el-table-column>
            <el-table-column type="index" label="序号" width="70"></el-table-column>
            <el-table-column property="affiliatedFileName" label="文件名称" width="230"></el-table-column>
          </el-table>
        </div>
      </div>
      <!--查询面板-->
      <div v-if="showHideQueryDivBool" class="new-queryDiv">
        <div class="new-queryDiv-inner">
          <el-form :model="queryParams" label-position="right" label-width="82px">
            <el-form-item label="省" prop="province">
              <el-select v-model="queryParams.province" placeholder="请选择" @change="chooseProvince" clearable value-key="name">
                <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="市" prop="city">
              <el-select v-model="queryParams.city" placeholder="请选择" @change="chooseCity" clearable value-key="name">
                <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="区/县" prop="county">
              <el-select v-model="queryParams.county" placeholder="请选择" @change="chooseCounty" clearable value-key="name">
                <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数据类型" prop="dataType">
              <el-select v-model="queryParams.dataType" placeholder="请选择" clearable value-key="name">
                <el-option v-for="item in dataTypesArray" :key="item.code" :label="item.name" :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div class="new-queryBtnDiv">
            <el-button @click="queryClick" type="primary">查询图层</el-button>
          </div>
          <div class="new-queryTableBtnDiv">
            <el-button @click="queryTableClick" type="primary">查询列表</el-button>
          </div>
          <div class="new-closeBtnDiv">
            <el-button @click="showHideQueryDiv(false)">关闭</el-button>
          </div>
        </div>
      </div>
      <!--表格面板-->
      <!-- <Table v-if="completeRefreshData==true"
             :isManage="showHideManageDivBool"
             :queryParams="queryParams"
             :selectType="selectType"
             :versionId="versionId"
             :selectId="selectId"
             :showTable="detailTable"
             @closeTableDiv="closeDetailResultDiv"
      ></Table> -->
      <Table :isManage="showHideManageDivBool"
             :queryParams="queryParams"
             :selectType="selectType"
             :versionId="versionId"
             :selectId="selectId"
             :showTable="detailTable"
             @closeTableDiv="closeDetailResultDiv"
      ></Table>
      <!--数据图层组件-->
      <MapLayers
          :map="map" :dataTypeInfoArray="dataTypeInfoArray" :layerInfoParams="layerInfoParams" :dataListGeom="dataListGeom"
          @openDataVersion="openDataVersion" :deleteSelectData="deleteSelectData" :openAddLayer="openAddLayer"
      >
      </MapLayers>
      <!--数据版本-->
      <el-dialog v-model="dialogVersion" title="请选择要查看的数据版本" width="800px" append-to-body v-if="dialogVersion" destroy-on-close @close="closeMapSelect">
        <h4></h4>
        <el-table ref="multipleTableRef1" :data="dataList" stripe style="width: 100%"
          @current-change="handleSelectionChange1" @select="handleSelectClick1" v-loading="versionLoading">
          <!-- <el-table-column type="selection" width="55" /> -->
          <el-table-column label=""  width="50" align="center">
            <template #default="scope">
              <el-radio v-model="versionId"  :label="scope.row.id">&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="versionCode" label="版本号" align="center" width="200"></el-table-column>
          <el-table-column prop="createTime" label="上传时间" align="center" width="160"></el-table-column>
          <el-table-column prop="fileName" label="文件名称" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column prop="region" label="区域" align="center" width="160" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" align="center" width="80">
            <template #default="scope">
              <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination style="margin-top: 15px" v-show="totalPage > 0" :total="totalPage" v-model:page="pageData.page"
          v-model:limit="pageData.rows" @pagination="versionCodeList" />
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" :disabled="!versionId" @click="querySelect">确定</el-button>
            <el-button @click="dialogVersion = false">取消</el-button>
          </div>
        </template>
      </el-dialog>
      <!--覆盖的数据版本-->
      <el-dialog v-model="dialogCover" title="请选择要覆盖的数据版本" width="700px" append-to-body :show-close="false"
        :close-on-click-modal="false">
        <h4></h4>
        <el-table class="listTables" ref="multipleTableRef" :data="dataList1" stripe style="width: 100%"
          @selection-change="handleSelectionChange2" @select="handleSelectClick2">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="versionCode" label="版本号" align="center" width="200"></el-table-column>
          <el-table-column prop="createTime" label="上传时间" align="center" width="110"></el-table-column>
          <el-table-column prop="fileName" label="文件名称" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="区域" align="center" show-overflow-tooltip>
            <template #default="{ row }">
              <span>{{ row.province }}-{{ row.city }}-{{ row.county }}</span>
            </template>
          </el-table-column>
        </el-table>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" :disabled="!coverId1" @click="queryCover">确定覆盖</el-button>
            <el-button @click="uploadData">直接上传</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 行政区域选择 -->
      <div class="areaDialog" v-show="openArea">
        <div class="close">
          <el-icon>
            <Close @click="closeSelect" />
          </el-icon>
        </div>
        <el-form :rules="rules" ref="rulesForm" label-width="100px">
          <el-form-item label="选择地区" prop="taskDistrict" style="width:280px">
            <!-- <el-cascader v-model="form.taskDistrict" placeholder="请选择地区" :props="{ checkStrictly: true,value: 'name' }" clearable separator="," collapse-tags collapse-tags-tooltip @change="getCheckedArea" ref="checkedAreaRef" :options="optionsSelect">
            </el-cascader> -->
            <AreaCascader @getAreaSelect="getAreaSelect" style="width: 260px" />
          </el-form-item>
        </el-form>
        <el-button @click="selectMapInfo" type="primary" style="margin:20px 0">确 定</el-button>
      </div>
      <RangeSelectionResult :resultShowTable="resultShowTable" :mapParams="mapParams" :selectType="selectType"
        @closeTableDiv="closeSelectResultDiv" @rowClickData="rowClickData" />
    </div>
  </div>
</template>

<script setup name="majorEngineerFacInfo">
//地图
import MajorFacInfoMap from '@/map/disasterDataManagement/maintainData/majorEngineerFacInfo/map.vue';
//地图
import MapLayers from '@/map/components/mapLayers/index.vue';
//字段说明
import FieldInfoDialog from '@/map/disasterDataManagement/maintainData/majorEngineerFacInfo/fieldInfoDialog.vue';
//表格面板
import Table from '@/map/disasterDataManagement/maintainData/majorEngineerFacInfo/table.vue';
import RangeSelectionResult from '@/map/disasterDataManagement/maintainData/majorEngineerFacInfo/rangeSelectionResult.vue'
import AreaCascader from './areaCascader.vue'
import {reactive, toRefs} from "vue";
import { getInfo } from '@/api/login'
import { getUserId } from "@/utils/auth";
import { getProvince, getChildArea } from "@/api/system/division";
import { repeatData,getVersionCode,deleteByTypeAndVersionId,getByRange, } from "@/api/map/disasterDataManagement/lifelineSystemInfo.js";
import { uploadShp,uploadExcel,getByVersionId } from "@/api/map/disasterDataManagement/majorEngineerFacInfo.js";
import { upLoadFile, downLoadFile, deleteFile } from "@/api/system/attachFile";
import { ElMessage, ElMessageBox } from 'element-plus';
import { iServerHttp } from "@/map/projMap.js";

const route = useRoute();
const { proxy } = getCurrentInstance();
const loading = ref(false);
const provinceData = ref([]); //省
const cityData = ref([]); //市
const areaData = ref([]); //区、县
const showHideUploadDivBool = ref(false);//是否显示上传面板
const showHideManageDivBool = ref(false);//是否显示管理面板
const showHideQueryDivBool = ref(false);//是否显示查询面板
const showHideDivType = ref("");
const queryFileResult = ref(false);//是否显示查询文件结果面板
const detailTable = ref(false);//是否显示表格面板
const multipleSelection = ref([]);
const fieldInfoVisible = ref(false);//是否显示字段说明
const fileDataList = ref([]);//查询文件列表
//选中查看详情数据
const selectId = ref(null);//选中查看详情数据Id
const selectType = ref("");//选中查看详情数据类型

const data = reactive({
  uploadParams: {
    province: "",
    city: "",
    county: "",
    type: "",//上传文件类型
    dataType:"",//数据类型
    fileType:"1",//文件类型：1Shp文件 2Excel文件
  },
  queryParams: {
    province: "",
    city: "",
    county: "",
    dataType: "",//数据类型
    provinceId: "",
    cityId: "",
    countyId: "",
  },
  manageFileParams: {
    affiliatedFileName: "",//文件名
  },
  layerInfoParams: {//查询图层信息参数（图层序号、图层名称、查询条件、是否显示）
    code:"",
    name:"",
    sqlText:'',
    show:false
  },
  selectMapParams: {
  }
});
const {
  uploadParams,
  queryParams,
  manageFileParams,
  layerInfoParams,selectMapParams
} = toRefs(data);
const rules = ref({
  // taskDistrict: [{ required: true, message: "请选择地区", trigger: "change" }],
  province: [{ required: true, message: "省不能为空", trigger: "change" }],
  city: [{ required: true, message: "市不能为空", trigger: "change" }],
  county: [{ required: true, message: "县不能为空", trigger: "change" }],
})
//文件类型
const fileType = ref([
  {code:"1",name:"Shp文件"},
  {code:"2",name:"Excel文件"},
]);
//数据类型
const dataTypesArray = ref([
  {code:"16",name:"重大工程历史震害"},
  {code:"17",name:"水库大坝"},
]);
//数据类型
const dataTypeInfoArray = ref([
  {code:"16",name:"重大工程历史震害",table:"",url:"",zIndex:5,fieldId:"car_id"},
  {code:"17",name:"水库大坝",table:"czt_reservior",url:iServerHttp()+"/iserver/services/map-fxfzczt/rest/maps/czt_reservior@fxfzczt",zIndex:5,fieldId:"cr_id"},
]);
const dataTypeArray = ref(["重大工程历史震害", "水库大坝"]);
const textarea = ref("");//上传文件只读显示文本框
const minList = ref([]);//要上传的文件的后缀名数组
const nameList = ref([]);//要上传的文件的文件名数组
const queryDataType = ref("");//查询数据类型

//地图传参--start
const completeRefreshData = ref(false);//防止刷新后地图不显示
//地图对象
const map = ref(null);
const getMap = (obj)=>{
  map.value = obj;
}
const showHideUploadDiv = (bool)=>{//显示|隐藏上传面板
  showHideUploadDivBool.value = bool;
  showHideManageDivBool.value = false;
  showHideQueryDivBool.value = false;
  queryFileResult.value = false;
  if(bool){
    showHideDivType.value = "showUploadDiv";
  }else{
    showHideDivType.value = "";
  }
  //清空上传参数
  clearUploadParams();
}
const showHideManageDiv = (bool)=>{//显示|隐藏管理面板
  showHideManageDivBool.value = bool;
  showHideUploadDivBool.value = false;
  showHideQueryDivBool.value = false;
  queryFileResult.value = false;
  if(bool){
    showHideDivType.value = "showManageDiv";
  }else{
    showHideDivType.value = "";
  }
  //清空查询参数
  clearQueryParams();
}
const showHideQueryDiv = (bool)=>{//显示|隐藏查询面板
  console.log(bool)
  showHideQueryDivBool.value = bool;
  showHideUploadDivBool.value = false;
  showHideManageDivBool.value = false;
  queryFileResult.value = false;
  if(bool){
    showHideDivType.value = "showQueryDiv";
  }else{
    showHideDivType.value = "";
  }
  //清空查询参数
  clearQueryParams();
}
const showDetailId = (array)=>{//根据ID显示查询详情修改面板
  if(array!=null && array.length==2){
    let id = array[0];
    let dataType = array[1];
    //根据id查询数据
    handleDetil(id,dataType);
  }
}
//地图传参--end
// 获取选中当前行数据
const handleSelectionChange2 = (checked) => {
  selectionChecked1.value = checked;
  if (selectionChecked1.value.length == 0) {
    coverId1.value = undefined;
  } else {
    coverId1.value = checked[0].id;
  }
}
//清空上传参数
function clearUploadParams(){
  uploadParams.value.province = null;
  uploadParams.value.city = null;
  uploadParams.value.county = null;
  uploadParams.value.dataType = null;
  textarea.value = "";
}

//清空查询参数
function clearQueryParams(){
  queryParams.value.province = null;
  queryParams.value.city = null;
  queryParams.value.county = null;
  queryParams.value.dataType = null;
  queryParams.value.provinceId = null;
  queryParams.value.cityId = null;
  queryParams.value.countyId = null;
  cityData.value = [];
  areaData.value = [];
}

/** 获取省列表 */
function getProvinceData() {
  getProvince().then((response) => {
    provinceData.value = response.data;
    completeRefreshData.value = true;//显示地图
  });
}
//选择省
function chooseProvince(value) {
  if(showHideUploadDivBool.value){//上传面板
    uploadParams.value.city = null;
    uploadParams.value.county = null;
    uploadParams.value.province = value.name;
  }else if(showHideManageDivBool.value){//管理面板
    queryParams.value.city = null;
    queryParams.value.county = null;
    queryParams.value.province = value.name;
    queryParams.value.cityId = null;
    queryParams.value.countyId = null;
    queryParams.value.provinceId = value.id;
  }else if(showHideQueryDivBool.value){//查询面板
    queryParams.value.city = null;
    queryParams.value.county = null;
    queryParams.value.province = value.name;
    queryParams.value.cityId = null;
    queryParams.value.countyId = null;
    queryParams.value.provinceId = value.id;
  }
  cityData.value = [];
  areaData.value = [];
  getChildArea(value.id).then(response => {
    cityData.value = response.data;
  });
}
//选择市
function chooseCity(value) {
  if(showHideUploadDivBool.value){//上传面板
    uploadParams.value.city = value.name;
    uploadParams.value.county = null;
  }else if(showHideManageDivBool.value){//管理面板
    queryParams.value.city = value.name;
    queryParams.value.county = null;
    queryParams.value.cityId = value.id;
    queryParams.value.countyId = null;
  }else if(showHideQueryDivBool.value){//查询面板
    queryParams.value.city = value.name;
    queryParams.value.county = null;
    queryParams.value.cityId = value.id;
    queryParams.value.countyId = null;
  }
  areaData.value = [];
  getChildArea(value.id).then((response) => {
    areaData.value = response.data;
  });
}
//选择区县
function chooseCounty(value) {
  if(showHideUploadDivBool.value){//上传面板
    uploadParams.value.county = value.name;
  }else if(showHideManageDivBool.value){//管理面板
    queryParams.value.county = value.name;
    queryParams.value.countyId = value.id;
  }else if(showHideQueryDivBool.value){//查询面板
    queryParams.value.county = value.name;
    queryParams.value.countyId = value.id;
  }
}

//警告消息
function alertMsg(msg){
  proxy.$modal.msgWarning(msg);
}

//选择文件
function uploadFileChange(){
  let uploadinputFiles = null;
  let fileType = uploadParams.value.fileType;//文件类型：1Shp文件 2Excel文件
  if(fileType==null || fileType===""){
    alertMsg("请选择文件类型!");
    return;
  }
  if(fileType=="1"){
    uploadinputFiles = document.getElementById("spaceData-button-selectfile").files;
  }else if(fileType=="2"){
    uploadinputFiles = document.getElementById("excel-button-selectfile").files;
  }
  minList.value = [];
  nameList.value = [];
  let text = "";
  for (let i = 0; i < uploadinputFiles.length; i++){
    text += uploadinputFiles[i].name+"\n";
    // 获取这个文件的后缀名
    minList.value.push(uploadinputFiles[i].name.slice(uploadinputFiles[i].name.length-3,uploadinputFiles[i].name.length));
    nameList.value.push(uploadinputFiles[i].name.split(".")[0]);
  }
  textarea.value = text;
}

//获取查询数据类型
function getSelectTypeNumStr(selectType){
  let type = null;
  if(selectType=="重大工程历史震害"){
    type = "16";
  }else if(selectType=="水库大坝"){
    type = "17";
  }

  return type;
}
const dialogCover = ref(false); // 覆盖开关
//上传文件
function uploadFileClick(){
  let uploadinput = null;
  let fileType = uploadParams.value.fileType;//文件类型：1Shp文件 2Excel文件
  if(fileType==null || fileType===""){
    alertMsg("请选择文件类型!");
    return;
  }
  if(fileType=="1"){
    uploadinput = document.getElementById("spaceData-button-selectfile");
  }else if(fileType=="2"){
    uploadinput = document.getElementById("excel-button-selectfile");
  }
  if (uploadinput.value == "") {
    alertMsg("上传前请先选择文件!");
    return;
  }
  let dataType = uploadParams.value.dataType;//数据类型
  if(fileType=="1"){
    if(!judgeIsOnce(minList.value)){
      alertMsg('上传数量限制:.dbf、.prj、.shp、.shx、.cpg文件各1个;.sbn、.sbx、.shp.xml文件至多一个。');
      return;
    }else if(!judgeName(nameList.value)){
      alertMsg("文件名请保持一致！");
      return;
    }
  }else if(fileType=="1"){
    if(!judgeExcel(minList.value)){
      alertMsg('上传数量限制:.xls或.xlsx文件1个');
      return;
    }
  }
  let province = uploadParams.value.province;
  let city = uploadParams.value.city;
  let area = uploadParams.value.county;
  if(province==null){
    province = "";
  }
  if(city==null){
    city = "";
  }
  if(area==null){
    area = "";
  }
  if(dataType==null){
    dataType = "";
  }
  if(dataType===""){
    alertMsg("请选择数据类型!");
    return;
  }
  const fileFormData = new FormData();
  // 因为要传一个文件数组过去，所以要循环append
  for(let i = 0; i < uploadinput.files.length; i++){
    //fileFormData.append('file', uploadinput.files[i].raw)
    fileFormData.append('file', uploadinput.files[i]);
  }
  let fileIds = "";//上传附件id列表
  proxy.$refs["rulesUpload"].validate((vaild) => {
    if(vaild) {
      //上传文件到附件表
      upLoadFile(fileFormData).then(res => {
        // console.log("上传文件成功")
        if (res.code==200) {
          let resultArr = res.data;
          // console.log(res.data);
          for(let i=0;i<resultArr.length;i++){
            if(i>0){
              fileIds += ",";
            }
            fileIds += resultArr[i].attachId;
          }
          // proxy.$modal.msgSuccess("上传文件成功");
          //获取查询数据类型
          let type = getSelectTypeNumStr(dataType);
          loading.value = true;
          coverObj.value = { fileIds: fileIds, type: type, province: province, city: city, county: area,bridgeType:'0' };
          repeatData({ name: fileType == '2' ? textarea.value.split('.')[0] : undefined, fileIds: fileIds, type: type, province: province, city: city, county: area,bridgeType:'0' }).then(res => {
              const { code, data } = res;
              if (code == 200) {
                if (data.length == 0) {
                  // console.log("formData");
                  // console.log(formData);
                  if(fileType=="1"){//Shp文件
                    // formData.append("file", null);
                    let params = {
                      fileIds: fileIds,
                      cover: '0',
                      province: province,
                      city: city,
                      id: '',
                      county: area
                    }
                    //上传保存数据
                    uploadShp(params).then((response) => {
                      nextTick(() => {
                        let msg = response.data;
                        loading.value = false;
                        ElMessageBox.alert(msg, '系统信息', {
                          confirmButtonText: '确认',
                          type: 'success'
                        });
                      });
                    }).catch(err => {
                      loading.value = false;
                    });
                  }else if(fileType=="2"){//excel文件
                    let formData = new FormData();
                    formData.append("fileIds", fileIds);
                    formData.append("cover", '0');
                    formData.append("province", province);
                    formData.append("city", city);
                    formData.append("id", '');
                    formData.append("county", area);
                    formData.append('file', uploadinput.files[0]);
                    //上传保存数据
                    uploadExcel(formData).then((response) => {
                      nextTick(() => {
                        let msg = response.data;
                        loading.value = false;
                        ElMessageBox.alert(msg, '系统信息', {
                          confirmButtonText: '确认',
                          type: 'success'
                        });
                      });
                    }).catch(err => {
                      loading.value = false;
                    });
                  }
                }else{
                  loading.value = false;
                  dataList1.value = data;
                  dialogCover.value = true;
                }
              }else{
                loading.value = false;
              }
          })
        }else{
          proxy.$modal.msgError("上传文件失败");
        }
      });
    }
  })
}
const dataList1 = ref([]);// 可覆盖版本数据
const coverObj = ref({});// 覆盖参数
const selectionChecked1 = ref([])
const coverId1 = ref();
const uploadData = () => {
  dialogCover.value = false;
  //上传保存数据
  const query = {
    ...coverObj.value,
    cover: '0',
    id: ''
  }
  let fileType = uploadParams.value.fileType;//文件类型：1Shp文件 2Excel文件
  if (fileType == "1") {
    proxy.$modal.loading('正在上传，请稍等...')
    uploadShp(query).then((response) => {
      proxy.$modal.closeLoading();
      nextTick(() => {
        let msg = response.data;
        loading.value = false;
        showHideUploadDiv(false);//隐藏上传面板
        ElMessageBox.alert(msg, '系统信息', {
          confirmButtonText: '确认',
          type: 'success'
        });
      });
    }).catch(err => {
      proxy.$modal.closeLoading();
      loading.value = false;
    });
  } else {
    proxy.$modal.loading('正在上传，请稍等...')
    let uploadinput = null;
    if(fileType=="1"){
      uploadinput = document.getElementById("spaceData-button-selectfile");
    }else if(fileType=="2"){
      uploadinput = document.getElementById("excel-button-selectfile");
    }
    let formData = new FormData();
    formData.append("fileIds", coverObj.value.fileIds);
    formData.append("cover", '1');
    formData.append("province", coverObj.value.province);
    formData.append("city", coverObj.value.city);
    formData.append("id", coverId1.value);
    formData.append("county", coverObj.value.area);
    formData.append('file', uploadinput.files[0]);
    uploadExcel(formData).then((response) => {
      proxy.$modal.closeLoading();
      dialogCover.value = false;
      nextTick(() => {
        let msg = response.data;
        loading.value = false;
        showHideUploadDiv(false);//隐藏上传面板
        ElMessageBox.alert(msg, '系统信息', {
          confirmButtonText: '确认',
          type: 'success'
        });
      });
    }).catch(err => {
      proxy.$modal.closeLoading();
      loading.value = false;
    });
  }
}
// 覆盖确认
const queryCover = () => {
  //上传保存数据
  loading.value = true;
  selectType.value = queryParams.value.dataType;//数据类型
  let fileType = uploadParams.value.fileType;//文件类型：1Shp文件 2Excel文件
  if (fileType == "1") {
    proxy.$modal.loading('正在上传，请稍等...')
    uploadShp({ ...coverObj.value, id: coverId1.value, cover: '1' }).then((response) => {
      dialogCover.value = false;
      proxy.$modal.closeLoading();
      nextTick(() => {
        let msg = response.data;
        loading.value = false;
        showHideUploadDiv(false);//隐藏上传面板
        ElMessageBox.alert(msg, '系统信息', {
          confirmButtonText: '确认',
          type: 'success'
        });
      });
    }).catch(err => {
      proxy.$modal.closeLoading();
      loading.value = false;
    });
  } else {
    proxy.$modal.loading('正在上传，请稍等...')
    let uploadinput = null;
    if(fileType=="1"){
      uploadinput = document.getElementById("spaceData-button-selectfile");
    }else if(fileType=="2"){
      uploadinput = document.getElementById("excel-button-selectfile");
    }
    let formData = new FormData();
    formData.append("fileIds", coverObj.value.fileIds);
    formData.append("cover", '1');
    formData.append("province", coverObj.value.province);
    formData.append("city", coverObj.value.city);
    formData.append("id", coverId1.value);
    formData.append("county", coverObj.value.area);
    formData.append('file', uploadinput.files[0]);
    uploadExcel(formData).then((response) => {
      proxy.$modal.closeLoading();
      dialogCover.value = false;
      nextTick(() => {
        let msg = response.data;
        loading.value = false;
        showHideUploadDiv(false);//隐藏上传面板
        ElMessageBox.alert(msg, '系统信息', {
          confirmButtonText: '确认',
          type: 'success'
        });
      });
    }).catch(err => {
      proxy.$modal.closeLoading();
      loading.value = false;
    });
  }
}
//上传附件
function submitUpload() {

}

//校验Excel文件类型
function judgeExcel(list) {
  let xls = 0,xlsx = 0;
  for(let i=0;i<list.length;i++){
    let item = list[i];
    if(item == 'xls') xls++;
    if(item == 'xlsx') xlsx++;
  }
  if(list.length==1 && (xls == 1 && xlsx === 0) || (xls === 0 && xlsx == 1)) return true;
  else return false;
}
//校验Shp文件类型
function judgeIsOnce(list) {
  // ["dbf","prj","shp","shx","cpg"];
  let dbf = 0,prj = 0,shp = 0,shx = 0,cpg = 0,sbn = 0,sbx = 0,xml = 0;
  for(let i=0;i<list.length;i++){
    let item = list[i];
    if(item == 'dbf') dbf++;
    if(item == 'prj') prj++;
    if(item == 'shp') shp++;
    if(item == 'shx') shx++;
    if(item == 'cpg') cpg++;
    if(item == 'sbn') sbn++;
    if(item == 'sbx') sbx++;
    if(item == 'xml') xml++;
  }
  if(dbf == 1 && prj == 1 && shp == 1 && shx == 1 && cpg == 1 && sbn < 2 && sbx < 2 && xml < 2) return true;
  else return false;
}
//校验Shp文件名称
function judgeName(list) {
  let name = list[0];
  let result = list.filter(function (item) {
    return item == name;
  })
  if(result.length == list.length) return true;
  else return false;
}

//校验tif文件类型
function judgeIsOnceTif(list) {
  let tif = 0;
  for(let i=0;i<list.length;i++){
    let item = list[i];
    if(item == 'tif') tif++;
  }
  if(tif == 1) return true;
  else return false;
}

//文件查询
function fileQuery(){
  if(showHideManageDivBool.value) {//管理面板
    /*getAllFile(queryParams.value).then((response) => {
      nextTick(() => {
        console.log(response.data);
        fileDataList.value = response.data.rows;
        console.log(fileDataList.value);
        //关闭表格面板
        closeDetailResultDiv();
        //是否显示查询文件结果面板
        queryFileResult.value = true;
      });
    });*/
  }
}

//文件及图层查询
function queryClick(){
  mapTableType.value = '图层'
  //查询数据类型
  queryDataType.value = queryParams.value.dataType;
  let dataType = queryDataType.value;
  if(dataType==null){
    dataType = "";
  }
  if(dataType===""){
    alertMsg("请选择数据类型!");
    return;
  }
  versionCodeList()
  //文件查询
  // fileQuery();
  // selectId.value = "";//清空选中ID
  // //查询条件
  // let sqlText = "";
  // //省市县查询过滤
  // let province = queryParams.value.province;
  // let city = queryParams.value.city;
  // let county = queryParams.value.county;
  // if(province && province!==""){
  //   if(city && city!==""){
  //     if(county && county!==""){
  //       sqlText = "province like '%"+province+"%' and city like '%"+city+"%' and county like '%"+county+"%'";
  //     }else{
  //       sqlText = "province like '%"+province+"%' and city like '%"+city+"%'";
  //     }
  //   }else{
  //     sqlText = "province like '%"+province+"%'";
  //   }
  // }

  // //图层查询参数
  // layerInfoParams.value = {//查询图层信息参数（图层序号、图层名称、查询条件、是否显示）
  //   code:getSelectTypeNumStr(dataType),
  //   name:dataType,
  //   sqlText:sqlText,
  //   show:true
  // };
}
const pageData = ref({
  page: 1,
  rows: 10,
})
const totalPage = ref(0);
const dataList = ref([])
const selectionChecked = ref([])
const versionId = ref();
// 查询版本信息
function versionCodeList() {
  proxy.$modal.loading('正在查询版本信息...')
  console.log(dataTypeInfoArray.value.filter(item => item.name == queryParams.value.dataType));
  queryParams.value.type = dataTypeInfoArray.value.filter(item => item.name == queryParams.value.dataType)[0].code;
  recordDataType.value = queryParams.value.type
  setVersionID()
  getVersionCode({ ...queryParams.value, ...pageData.value }).then(res => {
    dialogVersion.value = true;
    versionId.value = null
    proxy.$modal.closeLoading();
    dataList.value = res.data.rows ? res.data.rows : []
    totalPage.value = res.data.total;
  }).catch(err => {
    dialogVersion.value = false;
    versionId.value = null
    proxy.$modal.closeLoading();
  })
}
const selectData = ref([])
const type = ref('')
const dataListGeom = ref([])
const querySelect = () => {
  if(mapTableType.value == '图层' || mapTableType.value == '地图') {
    addVersion()
    queryDataType.value = queryParams.value.dataType;
    let dataType = queryDataType.value;
    if(dataType == '重大工程历史震害') {
      getByVersionId({versionId: versionId.value}).then(res => {
        dataListGeom.value = res.data
      }).catch(err => {

      })
    }else{
      //查询条件
      let sqlText = "version_id = '" + versionId.value + "'";

      //图层查询参数
      layerInfoParams.value = {//查询图层信息参数（图层序号、图层名称、查询条件、是否显示）
        code: getDataTypeIndex(dataType),
        name: dataType,
        sqlText: sqlText,
        show: true
      };
    }
    dialogVersion.value = false;
    openAddLayer.value = false
    mapTableType.value = ''
  }else if(mapTableType.value == '列表'){
    type.value = dataTypeInfoArray.value.filter(item => item.name == queryParams.value.dataType)[0].code;
    selectId.value = "";//清空Id
    selectData.value = [];
    selectType.value = queryParams.value.dataType;//数据类型
    detailTable.value = true;//打开表格面板
    dialogVersion.value = false;
    openAddLayer.value = false
  }else{
    // addVersion()
    // mapTableType.value = ''
    // openAddLayer.value = true
    // dialogVersion.value = false;
  }
}
//获取数据类型序号
function getDataTypeIndex(type) {
  let code = null;
  let dataTypeArr = dataTypeInfoArray.value;
  for (let i = 0; i < dataTypeArr.length; i++) {
    if (dataTypeArr[i].name == type) {
      code = dataTypeArr[i].code;
      break;
    }
  }
  return code;
}
function addVersion() {
  let list = dataTypeAndVersion.value
  for(let key in list) {
    if(key == recordDataType.value) {
      list[key] = versionId.value
      break
    }
  }
}
const versionLoading = ref(false);
//删除版本数据
const handleDelete = (index, row) => {
  versionLoading.value = true;
  proxy.$modal
    .confirm("与该数据关联的计算及结果将同步删除，确认删除？",)
    .then(function () {
      return deleteByTypeAndVersionId({ versionId: row.id });
    })
    .then(() => {
      //查询数据
      pageData.value.page = 1;
      versionCodeList();
      proxy.$modal.msgSuccess("删除成功");
      versionLoading.value = false;
    })
    .catch(() => { versionLoading.value = false; });
}
// 获取选中当前行数据
const handleSelectionChange1 = (checked) => {
  selectionChecked.value = checked;
  if (selectionChecked.value.length == 0) {
    versionId.value = undefined;
  } else {
    versionId.value = checked.id;
  }
}
function setVersionID() {
  let list = dataTypeAndVersion.value
  for(let key in list) {
    if(key == recordDataType.value) {
      versionId.value = list[key]
      break
    }
  }
}
const handleSelectClick1 = (selection) => {
  if (selection.length > 1) {
    const del_row = selection.shift()
    // toggleRowSelection属性的第二个元素接受的是一个选中状态的布尔值，false不选中，true选中；
    proxy.$refs['multipleTableRef1'].toggleRowSelection(del_row, false)
  }
}
//关闭查询文件结果面板
function closeQueryFileResult(){
  queryFileResult.value = false;
}

//删除文件数据
function deleteFileResultClick(){
  let ids = "";
  let selectRows = multipleSelection.value;
  if(selectRows!=null && selectRows.length>0){
    if(selectRows.length>10){
      alertMsg("最多勾选10条数据进行删除!");
      return;
    }
    for(let i=0;i<selectRows.length;i++){
      if(ids!=""){
        ids += ",";
      }
      ids += selectRows[i].uuid;
    }
    //删除事件
    deleteEvent(ids);
  }else{
    alertMsg("请勾选1条数据进行删除!");
  }
}

//删除事件
function deleteEvent(ids){
  let dataType = queryDataType.value;
  if(ids!="") {
    proxy.$modal
        .confirm("请确认是否要删除？",)
        .then(function () {
          //数据类型
          if(dataType=="地下管网"){
            return delPbeFileData(ids);

          }
        })
        .then(() => {
          //关闭表格面板
          closeDetailResultDiv();
          //关闭查询文件结果面板
          closeQueryFileResult();
          proxy.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
  }
}

//下载文件数据
function downloadFileResultClick(){
  let selectRows = multipleSelection.value;
  if(selectRows!=null && selectRows.length>0){
    if(selectRows.length>1){
      alertMsg("请勾选1条数据进行下载!");
      return;
    }
    //文件名
    let affiliatedFileName = selectRows[0].affiliatedFileName;
    manageFileParams.value.affiliatedFileName = affiliatedFileName;//文件名
    //下载文件
    let fileName = affiliatedFileName + ".zip";
    proxy.download("/fxfzypg/baseData/downloadSpaceFile", {
      ...manageFileParams.value
    }, fileName);
  }else{
    alertMsg("请勾选1条数据进行下载!");
  }
}

//查询结果多选事件
function handleSelectionChange(val) {
  multipleSelection.value = val;
}

//根据id查询数据
function handleDetil(id,dataType){
  selectId.value = id;//选中查看详情数据Id
  selectType.value = dataType;//选中查看详情数据类型
  detailTable.value = true;//打开表格面板
}

//查询列表数据
function queryTableClick(){
  mapTableType.value = '列表'
  //查询数据类型
  queryDataType.value = queryParams.value.dataType;
  let dataType = queryDataType.value;
  if(dataType==null){
    dataType = "";
  }
  if(dataType===""){
    alertMsg("请选择数据类型!");
    return;
  }
  selectionChecked.value = []
  versionId.value = undefined;
  versionCodeList();
}

//关闭表格面板
function closeDetailResultDiv(){
  detailTable.value = false;//关闭表格面板
}

//选择文件类型
function changeFileType() {
  //let selectfile = document.getElementById("spaceData-button-selectfile");
  //Shp文件
  //selectfile.setAttribute("accept",".shp,.dbf,.prj,.sbn,.sbx,.shp.xml,.shx,.cpg");
  let fileType = uploadParams.value.fileType;//文件类型：1Shp文件 2Excel文件
  minList.value = [];
  nameList.value = [];
  textarea.value = "";
  //根据数据类型设置Excel下载模板名称
  let dataType = uploadParams.value.dataType;
  if(fileType=="2" && dataType!==""){
    if(dataType=="燃气-储气罐"){
      downloadFileName.value = dataType + ".xlsx";
    }else{
      downloadFileName.value = dataType + "信息模板.xlsx";
    }
  }else{
    downloadFileName.value = "";
  }
}

//选择数据类型
function changeDataType() {
  let fileType = uploadParams.value.fileType;//文件类型：1Shp文件 2Excel文件
  let dataType = uploadParams.value.dataType;
  if(dataType=="重大工程历史震害"){
    fileType = "2";
    //文件类型
    uploadParams.value.fileType = fileType;
  }else{
    uploadParams.value.fileType = '1';
  }
  //根据数据类型设置Excel下载模板名称
  if(fileType=="2" && dataType!==""){
    if(dataType=="燃气-储气罐"){
      downloadFileName.value = dataType + ".xlsx";
    }else{
      downloadFileName.value = dataType + "信息模板.xlsx";
    }
  }else{
    downloadFileName.value = "";
  }
}

//显示字段说明dialog
function showFieldDialog(){
  if(uploadParams.value.dataType!=null && uploadParams.value.dataType!=""){
    fieldInfoVisible.value = true;
  }else{
    alertMsg("请先选择数据类型!");
  }
}

const downloadFileName = ref("");//下载Excel模板名称
// 模板下载
function importTemplate() {
  proxy.download("/base/product/downloadExcel", {
    fileName: downloadFileName.value
  }, downloadFileName.value);
}
const showHideRangeDivBool = ref(false)
const showHideRangeDiv = (bool) => {
  showHideRangeDivBool.value = bool;
  showHideQueryDivBool.value = false;
  showHideUploadDivBool.value = false;
  showHideManageDivBool.value = false;
  queryFileResult.value = false;
  openArea.value = false
  if (bool) {
    showHideDivType.value = "showRangeDiv";
  } else {
    showHideDivType.value = "";
  }
}
const positioningData = ref({})
const rowClickData = (row) => {
  positioningData.value = row
}
const openArea = ref(false)
const openXzq = (falg) => {
  openArea.value = falg
}
const resultShowTable = ref(false)
const mapParams = ref({})
const queryTaskRegionNameCodeListByGeomText = (geomext) => {
  resultShowTable.value = true
  selectMapParams.value.map = dataTypeAndVersion.value
  selectMapParams.value.viewingMethods = 0
  selectMapParams.value.geom = geomext
  selectMapParams.value.range = {}
  mapParams.value = selectMapParams.value
}
function selectMapInfo() {
  selectMapParams.value.map = dataTypeAndVersion.value
  selectMapParams.value.viewingMethods = 1
  selectMapParams.value.geom = ''
  // proxy.$refs["rulesForm"].validate((vaild) => {
  //   if(vaild) {
      mapParams.value = selectMapParams.value
      resultShowTable.value = true
  //   }
  // })
}
// 选择关闭后的回调
function closeSelect() {
  openArea.value = false;
}
//获取选择的行政区划列表
const getAreaSelect = (obj) => {
  if (obj.bouas.length != 0) {
    selectMapParams.value.range = {
      province: obj.bouas[0].provinceName == null ? '' : obj.bouas[0].provinceName,
      provinceId: obj.bouas[0].provinceId == null ? '' : obj.bouas[0].provinceId,
      city: obj.bouas[0].cityName == null ? '' : obj.bouas[0].cityName,
      cityId: obj.bouas[0].cityId == null ? '' : obj.bouas[0].cityId,
      county: obj.bouas[0].countyName == null ? '' : obj.bouas[0].countyName,
      countyId: obj.bouas[0].countyId == null ? '' : obj.bouas[0].countyId,
    }
  }
}
const dataTypeAndVersion = ref({
  "16":"",
  "17":"",
});
const mapTableType= ref('')
const openAddLayer = ref(false)
const recordDataType = ref('')
const dialogVersion = ref(false);
const deleteSelectData = ref(false)
const openDataVersion = (name) => {
  deleteSelectData.value = false
  if(name == false) {
    dataTypeAndVersion.value = {
      "16":"",
      "17":"",
    };
  }else if(name[1] == 'add'){
    let data = name[0]
    let dataName = data[data.length - 1]
    queryParams.value.dataType = dataName
    openAddLayer.value = false
    mapTableType.value = '地图'
    proxy.$modal.loading('正在查询版本信息...')
    queryParams.value.type = dataTypeInfoArray.value.filter(item => item.name == dataName)[0].code;
    recordDataType.value = queryParams.value.type
    setVersionID()
    getVersionCode({ dataType: dataName,type:queryParams.value.type, ...pageData.value }).then(res => {
      dialogVersion.value = true;
      versionId.value = null
      proxy.$modal.closeLoading();
      dataList.value = res.data.rows ? res.data.rows : []
      totalPage.value = res.data.total;
    }).catch(err => {
      dialogVersion.value = false;
      versionId.value = null
      proxy.$modal.closeLoading();
    })
  }else if(name[1] == 'delete'){
    dataListGeom.value = []
    let list = dataTypeAndVersion.value
    let code = dataTypeInfoArray.value.find(item => item.name == name[0][0]).code
    for(let i = 0;i < list.length;i++) {
      for(let key in list[i]) {
        if(ket == code) {
          list[i][key] = ''
        }
      }
    }
  }
}
function closeMapSelect() {
  if(mapTableType.value == '地图') {
    deleteSelectData.value = true
  }
}
function closeSelectResultDiv() {
  resultShowTable.value = false
}
onMounted(() => {
  getProvinceData();
});
</script>

<style lang="scss" scoped>
.mapDiv {
  position:absolute;top:0px;left:0px;width:100%;height:100%;
}
//上传面板
.new-uploadDiv{
  position:absolute;
  top:16px;
  left:100px;
  width:358px;
  height:500px;
  background-color:#fff;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
  border:1px solid #707070;
  border-radius: 4px;
}
.new-uploadDiv-inner {
  position:absolute;
  top:20px;
  left:30px;
  right:30px;
  bottom:0px;
}
.new-fileBtn {
  position: absolute;
  top: 240px;
  left: 0px;
  width: 70px;
}
.new-fieldInfoBtn{
  position: absolute;
  top: 260px;
  left: 10px;
  width: 70px;
  color:#107ce5;
}
.new-downloadFileBtn {
  position: absolute;
  top: 260px;
  left: 10px;
  width: 70px;
  color:#107ce5;
}
.new-filesTextArea{
  position: absolute;
  left: 80px;
  top: 240px;
  right:0px;
  height:150px;
}
.new-uploadBtnDiv {
  position: absolute;
  left: 80px;
  right:0px;
  bottom:20px;
}
.new-closeBtnDiv {
  position: absolute;
  /*right: 50px;*/
  right: 0px;
  bottom:20px;
}
//查询面板
.new-queryDiv{
  position:absolute;
  top:16px;
  left:100px;
  width:358px;
  height:280px;
  background-color:#fff;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
  border:1px solid #707070;
  border-radius: 4px;
}
.new-queryDiv-inner {
  position:absolute;
  top:20px;
  left:30px;
  right:30px;
  bottom:0px;
}
.new-queryBtnDiv {
  position: absolute;
  /*left: 80px;*/
  left: 0px;
  bottom:20px;
}
.new-queryTableBtnDiv {
  position: absolute;
  left: 118px;
  bottom:20px;
}
//查询文件结果面板
.new-queryFileResultDiv {
  position:absolute;
  top:300px;
  left:100px;
  width:358px;
  height:200px;
  background-color:#fff;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
  border:1px solid #707070;
  border-radius: 4px;
}
.areaDialog {
  text-align: center;

  .close {
    text-align: right;

    .el-icon {
      color: #606266;
      padding: 20px 0;
      margin-right: 10px;
      right: 0px;
      font-size: 22px;
    }
  }
  width: 320px;
  position: absolute;
  top: 410px;
  left: 290px;
  background: rgba($color: #fff, $alpha: 0.9);
}
</style>
